<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--<title>爱淘金</title>-->
<link rel="stylesheet" type="text/css" media="all" href="css/swiper.min.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" language="javascript" src="js/swiper.min.js"></script>
<script src="js/js.js" type="text/javascript"></script>
 <style type="text/css">   
            body{margin: 0;padding: 0;} 
            .Kline-div{
                /*position:absolute;*/
                width: 100%;
                /*bottom: 0rem;*/
                /*top:3.1rem;*/
                height:10rem;margin-bottom:.2rem;
            }
            .Kline-div .m-line{height: 49%;width: 100%;margin-bottom: 1%;} 
            .Kline-div .K-line{height: 50%;width: 100%;}   
        </style> 
</head>
<body style="background:#1c1c1e;">
	<!--顶部-->
	<div class="header">
		<a href="javascript:;" class="hele"></a>
		<h1 class="hetitle" style="background:rgb(8,4,4);">中石油</h1>
		<a href="javascript:;" class="helr">
			<img src="images/setting.png" alt="" class="setting" />
		</a>
	</div>
	
	<div id="page" class="page m3" style="background:none;position: relative;">
		<div class="klinetop">
			<p class="klinetopt1">490.10</p>
			<div class="klinetople">
				<p class="klinetoplet1">2018-11-14 12:02:27</p>
				<p class="klinetoplet2">+214   +0.47%</p>
			</div>
			<a href="quotes_order.html" class="klinetoplr">挂 单</a>
		</div>
		<ul class="klinelist">
			<li class="klineitem">今开：<span class="klineitems">3089</span></li>
			<li class="klineitem">昨收：<span class="klineitems">4589</span></li>
			<li class="klineitem">最高：<span class="klineitems">5674</span></li>
			<li class="klineitem">最低：<span class="klineitems">2367</span></li>
		</ul>
		<div class="kline">
			<p class="klinep">时分</p>
			<div class="klinelist2">
				<a href="javascript:;" class="klinelink on">1分钟</a>
				<a href="javascript:;" class="klinelink">5分钟</a>
				<a href="javascript:;" class="klinelink">30分钟</a>
				<a href="javascript:;" class="klinelink">1小时</a>
				<a href="javascript:;" class="klinelink">24小时</a>
			</div>
		</div>
		<div class="swiper-container swikline" id="swiper-container2">
			<div class="swiper-wrapper">
				<div class="swiper-slide blue-slide">
					<a href="javascript:;" class="swiplink">SMA</a>
				</div>
				<div class="swiper-slide blue-slide">
					<a href="javascript:;" class="swiplink">EMA</a>
				</div>
				<div class="swiper-slide blue-slide">
					<a href="javascript:;" class="swiplink">BCA</a>
				</div>
				<div class="swiper-slide blue-slide">
					<a href="javascript:;" class="swiplink">SMA</a>
				</div>
				<div class="swiper-slide blue-slide">
					<a href="javascript:;" class="swiplink">EMA</a>
				</div>
				<div class="swiper-slide blue-slide">
					<a href="javascript:;" class="swiplink">BCA</a>
				</div>
			</div>
		</div>

		<div id="Kline-div" class="Kline-div">  
            <div id="m-line" class="m-line"></div>
            <div id="k-content" class="K-line"></div> 
        </div> 
	</div>
	<!--底部-->
	<div class="footer">
		<div class="klineboot">
			<a href="javascript:;" class="klineblink">
				<img src="images/klineblink1.png" alt="" class="klineblinkpic" />
			</a>
			<a href="javascript:;" class="klineblink2">查看持仓</a>
			<a href="javascript:;" class="klineblink">
				<img src="images/klineblink2.png" alt="" class="klineblinkpic" />
			</a>
		</div>
	</div>
 <script src="js/jquery-3.3.1.min.js"></script> 
<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>   
<script src="js/tmpData.js" type="text/javascript" charset="utf-8"></script>
<script src="js/k-line.js" type="text/javascript" charset="utf-8"></script>
<script>
	$(function(){
		//时分切换
		$(".klinelist2 .klinelink").on('click',function(){
			$(this).addClass('on').siblings(".klinelink").removeClass('on')
		})
		
		//表格滑动
		var mySwiper2 = new Swiper('#swiper-container2',{
			slidesPerView : 2.5,
//			slideToClickedSlide: true,
		})
		$(".swiper-wrapper .swiper-slide").on('click',function(){
			$(this).addClass('swiper-slide-active').siblings(".swiper-slide").removeClass('swiper-slide-active')
		})
		
		//k线图数据
		var mChart = echarts.init(document.getElementById('m-line'));
	    mChart.setOption(initMOption(mdata, 'us'));
	
	    var kChart = echarts.init(document.getElementById('k-content'));
	    kChart.setOption(initKOption(kdata));
	})
    
</script>
</body>
</html>
